<template>
	<view class="page">
		<!-- <view class="houseId row-center">
			{{show_nfcId ? '鸽舍号：'+ show_nfcId : '鸽舍号'}}
		</view> -->
		<view class="w">
			<view class="content">
				<u-tabs-swiper ref="uTabs" name="cageText" :list="list_cage" @change="tabsChange"
					:is-scroll="false" active-color="#9EB8E3" inactive-color="#303133" :current="current"
					font-size="30"></u-tabs-swiper>
				<!-- 可能可以通过不同的宽度去适配不同的设备 -->
			</view>
			
			<!-- 数据加载状态 -->
			<view v-if="isLoading" class="loading-data">
				<u-loading mode="circle" size="40"></u-loading>
				<text>数据加载中...</text>
			</view>
			
			<!-- 有数据时显示 -->
			<swiper v-else-if="list_cage && list_cage.length" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 70vh;"
			>
				<swiper-item class="swiper-item" v-for="(i,index) in list_cage" :key="index">
					<StatuAbnormal :cageStatu="cageStatu" :abnormal="abnormal" :oldNum="oldNum" :youngNum="youndNum" >  <!-- 传入状态和异常 -->
					</StatuAbnormal>
				</swiper-item>
				
			</swiper>
			
			<!-- 无数据状态 -->
			<view v-else-if="list_cage && list_cage.length === 0" class="no-data">
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>
<script>
	
	import {mapGetters} from 'vuex'
	import StatuAbnormal from '@/components/StatuAbnormal/StatuAbnormal.vue'
	import {reqGetStatuAbnormal,reqCageDetail,reqStayNum, reqGetStatu} from '@/api/index.js'
	import {statuAbnormal} from '@/utils/abnormalString.js'
	export default {
		data(){
			return {
				oldNum: 0,
				youndNum:0,
				cageId: 1,
				statu: '',
				// Canghao:0,
				abnormal: [],
				list_cage: [], // 初始化为空数组，动态生成
				cageStatu:'',
				// 全屏选型卡
				current: 0,
				swiperCurrent: 0,
				isLoading: false
			}
		},
		watch:{
			cageId(newValue, oldValue){
				if(newValue !== oldValue){
					this.getStatuAbnormal();
					this.CageDetail();
				}
			},
			// 监听nfcId变化
			async nfcId(newValue, oldValue) {
				if (oldValue !== newValue) {
					this.isLoading = true;
					try {
						await this.getStatu(); // 获取鸽笼状态
						await this.getStatuAbnormal();
						await this.CageDetail();
					} catch (error) {
						console.error('nfcId变化时加载失败:', error);
					} finally {
						this.isLoading = false;
					}
				}
			}
		},
		async mounted() {
			this.isLoading = true;
			try {
				await this.getStatu(); // 先获取鸽笼状态
				await this.getStatuAbnormal();
				await this.CageDetail();
			} catch (error) {
				console.error('初始化失败:', error);
			} finally {
				this.isLoading = false;
			}
		},
		computed:{
			...mapGetters(['show_nfcId','nfcId'])
		},
		methods:{
			// 获取鸽笼状态（与放仔、调仔页面相同的方法）
			async getStatu() {
			   console.log('详细数据页面 - 获取鸽笼状态');
			   const obj = {
			   	siteId: uni.getStorageSync('siteId'),
			   	houseId: this.nfcId,
			   }
			   console.log('获取鸽笼状态参数:', obj);
			   
			   try {
			   	const result = await reqGetStatu(obj);
			   	console.log('鸽笼状态结果:', result);
			   	
			   	if(result.code === 200 && result.statu) {
			   		// 根据返回的鸽笼状态数组动态生成list_cage
			   		this.list_cage = result.statu.map((cage, index) => ({
			   			cageText: `${cage.cage_id}号`,
			   			cage_id: cage.cage_id
			   		}));
			   		console.log('动态生成的鸽笼列表:', this.list_cage);
			   	} else {
			   		console.error('获取鸽笼状态失败:', result);
			   		this.list_cage = [];
			   	}
			   } catch (error) {
			   	console.error('获取鸽笼状态异常:', error);
			   	this.list_cage = [];
			   }
			},
			
			async CageDetail(){
				const params = {
					siteId: uni.getStorageSync('siteId'),
					houseId: this.nfcId,
				};
				try {
					let result = await reqCageDetail(params);
					console.log('CageDetail result',result);
					if(result.code === 200 && result.cages && result.cages.length > 0){
						// 确保当前cageId在有效范围内
						if (this.cageId > result.cages.length) {
							this.cageId = 1;
							this.current = 0;
							this.swiperCurrent = 0;
						}
						
						const currentCage = result.cages[this.cageId-1];
						if (currentCage) {
							this.oldNum = currentCage.number || 0;
							this.youndNum = currentCage.cub_number || 0;
							this.cageStatu = currentCage.statu || '';
						}
					}
				} catch (error) {
					console.error('CageDetail error:', error);
				}
			},
			async getStatuAbnormal(){
				const params = {
					siteId: uni.getStorageSync('siteId'),
					houseId:this.nfcId,
					cageId: this.cageId,
				};
				  try{
					  let results = await reqGetStatuAbnormal(params);
					  if (results.code === 200) {

					    this.statu = results.statu;
					    this.abnormal = results.abnormals.slice(0,5).reverse();
						console.log('................',this.abnormal);
					  
					    // 定义一个包含要删除的特定值的数组
					    // single：单蛋
					    // discard：弃孵
					    // abandon：弃仔
					    // spermatozonia：光蛋
					    // breakage：破损
					  //   const valuesToRemove = ['single', 'spermatozonia', 'discard', 'abandon', 'breakage',,'death_young4','death_young3','death_young2','death_young1'];
					  
					  //   // 计算明天的日期并设置定时器
					  //   const tomorrow = new Date();
					  //   tomorrow.setDate(tomorrow.getDate() + 1);
					  //   setTimeout(() => {
					  // 	// 遍历要删除的值的数组
					  // 	valuesToRemove.forEach((value) => {
					  // 	  if (this.abnormal.includes(value)) {
					  // 		// 使用 filter 方法从数组中删除特定值
					  // 		this.abnormal = this.abnormal.filter(abnormalItem => abnormalItem !== value);
					  // 	  }
					  // 	});
					  //   }, tomorrow.getTime() - Date.now()+1000)
					  }else{
						  console.error('!!!!!!!!', results.code);
					  }
				  }catch(error){
					  console.error('55555555.', error);
				  }
			},
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.cageId = index + 1;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.houseId {
		width: 100%;
		margin: 10rpx auto;
		padding: 18.12rpx 18.12rpx;
		font-size: 39.86rpx;
		border-radius: 14.49rpx;
		color: #fff;
		background-color: #7d9ad2;
	}
	
	// 添加加载状态和无数据状态的样式
	.loading-data, .no-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 32rpx;
		color: #999;
		flex-direction: column;
		
		text {
			margin-top: 20rpx;
		}
	}
</style>